<template>
  <view class="container">
		<view class="form-box">
			<view class="form-item flex-space-b">
				<view class="form-label">
					姓名：
				</view>
				<view class="form-cont">
					<u-input
						v-model="form.realName"
						:customStyle="inputStyle"
						:placeholderStyle="placeStyle"
						placeholder="請輸入姓名"
						border="none"
					/>
				</view>
			</view>
			<view class="form-item flex-space-b">
				<view class="form-label">
					微信號：
				</view>
				<view class="form-cont">
					<u-input
						v-model="form.wxNum"
						:customStyle="inputStyle"
						:placeholderStyle="placeStyle"
						placeholder="请输入微信號"
						border="none"
					/>
					<view class="tip">
						為確保客服人員能透過微信聯絡閣下，請填寫微信號或手機號，及請閣下確保是能透過手機號或wechatID任一方式加閣下為好友，以便聯絡。
					</view>
				</view>
			</view>
			<view class="form-item flex-space-b">
				<view class="form-label">
					性別：
				</view>
				<view class="form-cont">
					<u-radio-group
						v-model="form.sex"
						placement="row"
					>
						<u-radio
							v-for="(item, index) in dict.type['sys_user_sex']"
							:key="index"
							:label="item.label"
							:name="item.value"
							:customStyle="{ marginLeft : '48rpx' }"
							activeColor="#E9930A"
						/>
					</u-radio-group>
				</view>
			</view>
			<view class="form-item flex-space-b">
				<view class="form-label">
					請選擇班級：
				</view>
				<view class="form-cont" @click="showClass = true">
					<view class="form-select flex-space-b">
						<text :class="{ sel: form.className }">{{ form.className ? form.className : '请選擇班級' }}</text>
						<u-icon name="arrow-down" size="15" color="#C0C4CC" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					您想我們客服什麼時間段聯繫您留位：
				</view>
				<picker :value="form.callTime" :range="dict.type['code_call_time']" range-key="label" @change="changeCallTime">
					<view class="form-cont">
						<view class="form-select flex-space-b">
							<text :class="{ sel: form.callTime }">{{ form.callTime ? showData.callTime : '请選擇聯繫時間' }}</text>
							<u-icon name="arrow-down" size="15" color="#C0C4CC" />
						</view>
					</view>
				</picker>
			</view>
			<view class="form-item">
				<view class="form-label">
					從什麼渠道得悉本中心課程：
				</view>
				<picker :value="form.adWay" :range="dict.type['code_ad_way']" range-key="label" @change="changeWay">
					<view class="form-cont">
						<view class="form-select flex-space-b">
							<text :class="{ sel: form.adWay }">{{ form.adWay ? showData.adWay : '请選擇得悉渠道' }}</text>
							<u-icon name="arrow-down" size="15" color="#C0C4CC" />
						</view>
					</view>
				</picker>
			</view>
		</view>
		<view class="footer-tips">以上填寫之個人資料內容僅用於本中心留位課程之用，在未經本人同意下，本中心不會洩露相關信息給第三方。</view>
		<view class="agree-check flex-center">
			<u-checkbox-group>
				<u-checkbox v-model="checkAgree" shape="circle" label="同意" labelColor="#000" activeColor="#E9930A" @change="changeCheckbox"></u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="submit-btn">
			<u-button
				color="#E9930A"
				text="確定"
				:customStyle="{ height: '82rpx', borderRadius: '6rpx' }"
				@click="handleSubmit"
			/>
		</view>
		
		<u-popup :show="showPop" :closeOnClickOverlay="false" :safeAreaInsetBottom="false" mode="center" round="16rpx" @close="showPop = false">
			<view class="pop-box">
				<view class="desc">
					<view>{{ popInfo.desc }}</view>
					<view>微信：{{ popInfo.contact }}</view>
					<view>客服辦公時間：{{ popInfo.time }}</view>
				</view>
				<view class="btn" @click="closePop">確認</view>
			</view>
		</u-popup>
		
		<u-popup :show="showClass" :safeAreaInsetBottom="false" mode="center" round="16rpx" @close="showClass = false">
			<view class="class-box">
				<view class="title">可選班別</view>
				<view class="list">
					<view v-for="item in classList" :key="item.id" class="item flex-align" @click="handleClass(item)">
						<view class="left">
							<view class="checkbox" :class="{ sel : item.id === form.classId }"></view>
						</view>
						<view class="cont">
							<view class="name">{{ item.className }}</view>
							<view v-if="item.startDate" class="date">{{ item.startDate }}</view>
						</view>
						<view class="week">
							<block v-if="item.weeks.length">
								<view v-for="(v, k) in item.weeks" :key="k">{{ v }}</view>
							</block>
						</view>
						<view class="time">
							<block v-if="item.startTime">
								{{ item.startTime }}-{{ item.endTime }}
							</block>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getBtCourse, addBtOrder } from '@/api/course'
	import { getSystemConfig } from '@/api/home'
  export default {
		dicts: [
			'code_call_time',
			'code_ad_way',
			'sys_user_sex'
		],
		data() {
			return {
				inputStyle: {
					backgroundColor: '#F3F4F6',
					padding: '0 24rpx',
					height: '72rpx',
					borderRadius: '8rpx',
					color: '#333',
					fontSize: '30rpx',
					fontWeight: 400
				},
				placeStyle: 'color: #C0C4CC;',
				form: {
					courseId: '',
					courseName: '',
					classId: '',
					className: '',
					realName: '',
					sex: '0',
					wxNum: '',
					callTime: '',
					adWay: ''
				},
				showData: {
					callTime: '',
					adWay: ''
				},
				checkAgree: false,
				showPop: false,
				showClass: false,
				classList: [],
				popInfo: {
					desc: '',
					contact: '',
					time: ''
				}
			}
		},
		onLoad(o) {
			this.getInfo(o.id)
			this.getConfig()
		},
		methods: {
			async getInfo(Id) {
				const { data } = await getBtCourse({ Id })
				data.coursedetail.btCourseClassNav.map(v => {
					v.weeks =  v.weeks && v.weeks.split(',')
				})
				Object.assign(this.form, {
					courseId: Id,
					courseName: data.coursedetail.name,
				})
				this.classList = data.coursedetail.btCourseClassNav
			},
			async getConfig() {
				const { data } = await getSystemConfig()
				this.popInfo = {
					desc: data.find(v => v.configKey === 'bd.suborder.des').configValue,
					contact: data.find(v => v.configKey === 'bd.service.wechat').configValue,
					time: data.find(v => v.configKey === 'bd.service.officehours').configValue
				}
			},
			changeCallTime(e) {
				const info = this.dict.type['code_call_time'][Number(e.detail.value)]
				this.form.callTime = info.value
				this.showData.callTime = info.label
			},
			changeWay(e) {
				const info = this.dict.type['code_ad_way'][Number(e.detail.value)]
				this.form.adWay = info.value
				this.showData.adWay = info.label
			},
			handleClass(row) {
				Object.assign(this.form, {
					classId: row.id,
					className: row.className,
				})
				this.showClass = false
			},
			changeCheckbox(e) {
				this.checkAgree = e
			},
			async  handleSubmit() {
				if (!this.form.realName) {
					this.$Message.warns('請填寫姓名')
					return
				}
				if (!this.form.wxNum) {
					this.$Message.warns('請填寫微信號')
					return
				}
				if (!this.form.classId) {
					this.$Message.warns('請選擇班級')
					return
				}
				if (!this.form.callTime) {
					this.$Message.warns('请選擇聯繫時間')
					return
				}
				if (!this.form.adWay) {
					this.$Message.warns('請選擇得悉渠道')
					return
				}
				if (!this.checkAgree) {
					this.$Message.warns('請閱讀並同意')
					return
				}
				await addBtOrder(this.form)
				this.showPop = true
			},
			closePop() {
				this.showPop = false
				this.$navigator('/pages/mine/order', 'redirectTo')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #fff;
	}
	.form-box {
		.form-item {
			padding: 32rpx 0;
			border-bottom: 1px solid #EEEEEE;
			&.flex-space-b {
				.form-label {
					min-width: 180rpx;
					width: 180rpx;
					margin: 0 16rpx 0 0;
				}
				.form-cont {
					flex: 1;
				}
			}
			.form-label {
				color: #303133;
				font-size: 30rpx;
				margin-bottom: 16rpx;
			}
			/deep/ .form-cont {
				.u-radio-group {
					justify-content: flex-end;
				}
				.tip {
					color: #3C9CFF;
					font-size: 24rpx;
					padding-top: 10rpx;
					line-height: 32rpx;
				}
				.form-select {
					background-color: #F3F4F6;
					padding: 0 24rpx;
					height: 72rpx;
					border-radius: 8rpx;
					font-size: 30rpx;
					font-weight: 400;
					text {
						color: #C0C4CC;
						&.sel {
							color: #333;
						}
					}
				}
			}
		}
	}
	.footer-tips {
		padding: 50rpx 0 32rpx;
		color: #000;
		font-size: 26rpx;
		line-height: 36rpx;
	}
	.submit-btn {
		padding: 70rpx 0 40rpx;
	}
	.pop-box {
		width: 620rpx;
		padding: 40rpx;
		box-sizing: border-box;
		.desc {
			padding: 44rpx 0 84rpx;
			color: #303133;
			font-weight: 400;
			font-size: 30rpx;
			line-height: 40rpx;
		}
		.btn {
			text-align: center;
			width: 279rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #E9930A;
			border-radius: 6rpx;
			background-color: #E9930A;
			color: #fff;
			font-size: 30rpx;
			margin: 0 auto;
		}
	}
	.class-box {
		width: 640rpx;
		border-radius: 16rpx;
		overflow: hidden;
		.title {
			text-align: center;
			background-color: #E9930A;
			line-height: 100rpx;
			color: #fff;
			font-size: 34rpx;
			font-weight: 500;
		}
		.list {
			.item {
				min-height: 140rpx;
				border-bottom: 1px solid #ccc;
				&:last-child {
					border-bottom: 0;
				}
			}
			.left {
				padding: 0 20rpx 0 30rpx;
				.checkbox {
					position: relative;
					width: 30rpx;
					height: 30rpx;
					border: 2rpx solid #666;
					border-radius: 50%;
					&.sel {
						border-color: #E9930A;
						&::after {
							content: " ";
							position: absolute;
							top: 50%;
							left: 50%;
							width: 16rpx;
							height: 16rpx;
							margin: -9rpx 0 0 -9rpx;
							border-radius: 50%;
							background-color: #E9930A;
						}
					}
				}
			}
			.cont {
				flex: 1;
				text-align: center;
				color: #000;
				font-size: 28rpx;
			}
			.week {
				color: #666;
				font-size: 28rpx;
				padding: 0 20rpx;
			}
			.time {
				color: #999;
				font-size: 28rpx;
				padding: 0 20rpx;
			}
		}
	}
</style>
